import css from '../../styles/modules/store.module.css'
import LibraryCard from "./LibraryCard.tsx";
import {useEffect, useState} from "react";
import axios from "axios";
import {baseUrl} from "../../settings/Settings.ts";
import {UserAccount} from "../../model/UserAccount.ts";

const LibraryContainer = (props: { id: string, name: string, imgUrl: string, items: Stack[] }) => {
    const {id, name, items, imgUrl} = props
    const rowHeaderId = "h" + id


    const [account, setAccount] = useState<UserAccount>(undefined)
    useEffect(() => {
        const element = document.getElementById(rowHeaderId);


        if (element) {
            element.style.backgroundImage = `url(${imgUrl})`;
        }

        const fetchData = async () => {
            try {
                const response = await axios.get(`${baseUrl}/api/account/info`, {
                    withCredentials: true, // send credentials with the request
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const data = response.data;
                if (response.status === 200) {
                    setAccount(data.account);

                }

            } catch (error) {
                console.error('Error fetching data');
            }
        };

        fetchData();
    }, []);


    return (
        <div className="container mt-3 container-content" id={id}>

            <div id={rowHeaderId}
                 className={`"row d-flex justify-content-between align-items-center rowHeader" ${css.rowHeader}`}>
                <h1 id="scrollspyHeadingFish" className={`"display-1 h1-category-name"  ${css.rowName}`}>{name}</h1>
            </div>

            <div className="row row-cols-1 mt-0 row-cols-sm-2 row-cols-md-4 g-3 card-row">
                {
                    items.map((book) => (
                        <LibraryCard stack={book}  isLoggedIn={true}/>
                    ))
                }
            </div>
        </div>


    )

}

export default LibraryContainer